<template>
  <div class="morelist">
    <div class="filter-top" > 
      <div class="change-box" @click="changeOrderType">
        {{orderType==0?'销售订单':orderType==1?"智能柜有购物":'烹饪机订单'}} <div class="iconfont iconqiehuan"></div>
      </div>
      <div class="iconfont iconshaixuan" @click="showFilter = true"></div>
      <!-- 请选择筛选条件 <div class="isclick"> </div> --> 
    </div>
    <div class="data-list">
      <div class="data-header" v-if="orderType==2">
        <div class="data-header-title">店铺 </div>
        <div class="data-header-title">商品 </div> 
        <div class="data-header-title">销售时间</div>
      </div>
      <div v-if="orderType==2">
        <div class="data-row" v-for="(item,index) in list" :key="index" :style="{ 'background': index % 2 == 0 ? '#fff' : '#f5f5f5'}" @click="showDialog(index)">
          <div class="data-row-item">{{item.storeName}} </div>
          <div class="data-row-item">{{item.goodsName}} </div>
          <div class="data-row-item">{{item.orderTime}} </div>
        </div> 
      </div>
     
      <div class="data-header" v-if="orderType==0 ||orderType==1">
        <!-- <div class="data-header-title">设备门店 </div> -->
        <div class="data-header-title">店铺 </div>
        <div class="data-header-title">商品数量 </div>
        <div class="data-header-title">金额</div>
        <div class="data-header-title">时间</div>
      </div>
      <div v-if="orderType==1 || orderType==0">
        <div class="data-row" v-for="(item,index) in list" :key="index" :style="{ 'background': index % 2 == 0 ? '#fff' : '#f5f5f5'}" @click="showZGDialog(index)">
          <div class="data-row-item">{{item.storeName}} </div>
          <div class="data-row-item">{{item.goodsTotalNumber}} </div>
          <div class="data-row-item">{{item.actualPayTotal}} <span class="repaird iconfont icontuikuan"  v-if="item.orderStatus == 5"></span> </div>
          <div class="data-row-item">{{item.orderDate}} </div>
        </div> 
      </div>


      <div class="view-more isbtn" @click="getMore" v-if="pageNum <= totalPage">
        <span>加载更多</span>  <div class="isclick"></div>
      </div>
      <div class="view-more isbtn" v-else>
        <span>没有更多内容啦~</span>  
      </div>

    </div>
    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        <search v-model="searchText"
                position= "relative"
                placeholder="请输入商品名"
                ref="search">
        </search>
        <div class="filter-title">时间段</div>
        <div class="data-time-box">
          <div class="row-box">
            <group>
              <datetime v-model="starTime" :end-date="defult_endTime"></datetime>
            </group> 
          </div>
          <div>至</div>
          <div class="row-box">
            <group>
              <datetime v-model="endTime" :end-date="defult_endTime"></datetime>
            </group> 
          </div>
        </div>

        <div class="">城市</div>
        <div class="row-box">
          <group>
            <popup-picker v-model="city" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter> 
    <!-- 下拉筛选end --> 

    <!-- 烹饪机订单详情 start -->
    <x-dialog :show.sync="dialogShow" class="dialog"  hide-on-blur>
      <div class="dialog-content">
        <row title="店铺" :value="list[viewIndex] && list[viewIndex].storeName"></row>
        <row title="商品" :value="list[viewIndex]&&list[viewIndex].goodsName"></row>
        <row title="数量" :value="list[viewIndex]&&list[viewIndex].goodsQuantity"></row>
        <row title="金额" :value="list[viewIndex]&&list[viewIndex].orderAmount + ''"></row>
        <row title="销售时间" :value="list[viewIndex]&&list[viewIndex].orderTime" ></row>
        <row title="地址" :value="list[viewIndex] && list[viewIndex].storeAddress"></row>  
      </div>
    </x-dialog>
    <!-- 烹饪机订单详情 end -->

    <!-- 智购猫订单详情 start-->
    <x-dialog :show.sync="zg_show" class="dialog"  hide-on-blur>
      <div class="dialog-content">
        <row title="店铺" :value="list[viewIndex] && list[viewIndex].storeName"></row>  
        <row title="类型" v-if="orderType==0" :value="list[viewIndex] && list[viewIndex].orderTypeMsg"></row>  
        <row title="金额" :value="list[viewIndex]&&list[viewIndex].actualPayTotal + ''"></row>
        <row title="支付方式" >
          <div class="" slot="rowRight">{{ list[viewIndex].payType == 1 ? '微信支付' :  list[viewIndex].payType == 2 ? '余额支付' : '合作方收款'}}</div>
        </row>
        <row title="订单类型" :value="list[viewIndex]&&list[viewIndex].orderTypeDetail"></row>
        <row title="备注"  v-if="list[viewIndex]&&list[viewIndex].remarks" :value="list[viewIndex]&&list[viewIndex].remarks"></row>
        <row title="销售时间" :value="list[viewIndex]&&list[viewIndex].orderDate" ></row>
        <row title="开柜人手机号" v-if="list[viewIndex] && list[viewIndex].phoneNumber" :value="list[viewIndex] && list[viewIndex].phoneNumber"></row>  
        <row title="购买人手机号" v-if="list[viewIndex] && list[viewIndex].mobile" :value="list[viewIndex] && list[viewIndex].mobile"></row>
        <row title="收货地址" v-if="list[viewIndex] && list[viewIndex].address" :value="list[viewIndex] && list[viewIndex].address"></row>
        <!-- <row title="地址" :value="list[viewIndex] && list[viewIndex].storeAddress"></row>  -->
        <div v-if="orderType!=2 &&list[viewIndex] &&list[viewIndex].goodsList && list[viewIndex].goodsList.length">
          <div class="goods-title">商品列表</div>
           <!-- <row v-for="(item,index) in  list[viewIndex].goodsList" :key="index" :title="item.goodsName+'x'+item.goodsNumber" :value="item.goodsPrice"></row>  -->
           <div class="goods-row-box" v-for="(item,index) in  list[viewIndex].goodsList" :key="index">
            <div class="goods-row-item flex_lay" @click="showChilderGoods(viewIndex,index)">
              <div class="goods-row-left">{{item.goodsName+'x'+item.goodsNumber}}</div>
              <div class="goods-row-right flex_lay">
                <div>{{ item.goodsPrice }}</div>
                <div class="isclick" v-if="item.goodsList"></div>
              </div>
            </div> 
            <div v-for="(goods,idx) in  item.goodsList" :key="idx" class="goods-row-item gray-bg flex_lay" v-show="item.hidden">
              <div class="goods-row-left">{{goods.goodsName+'x'+goods.goodsNumber}}</div>
            </div>
           </div>
        </div>
        <div class="refund-btn isbtn" v-if="list[viewIndex] && list[viewIndex].orderStatus == 1" @click="refundOrder()">退款</div>
      </div>
    </x-dialog>
    <!-- 智购猫订单详情 end-->
    <!-- 上架弹窗 -->
    <x-dialog :show.sync="refund_dailog_show" class="dialog"  hide-on-blur>
      <div class="dia-title">退款</div>
      <div class="dia-content">
          <!-- <div class="dia-tips">正在退款<span> {{ list[viewIndex] && list[viewIndex].goodsName  }} </span></div> -->
          <div class="flex-box"> <div  class="left-text">退款金额: </div>   <input type="number" class="input-dia" v-model="refund_money" placeholder="请输入退款金额" /></div>
          <div class="money-set"> <div  class="left-text">备注:</div>  <input  class="input-dia" v-model="refund_remark" placeholder="请输入备注" /></div> 
      </div>
      <div class="btn-box">
          <div class="cancle-btn" @click="refund_dailog_show = false"> 取消 </div>
          <div class="confirm-btn" @click="confirmToRefund()">确认</div>
      </div>
    </x-dialog>
  </div> 
</template>

<script> 
import { Search } from 'vux'
import api from '@/api/api.js' 
import row from '@/components/row' 
import topFilter from '@/components/topFilter'
import { Datetime, Group, PopupPicker,XDialog } from 'vux'
import util from '@/utils/util.js'
export default {
  name: 'more',
  components: {
    Search,
    topFilter,
    XDialog,
    Datetime, 
    row,
    Group, 
    PopupPicker, 
  },
  data () {
    return { 
      refund_money:'',
      refund_remark:'',
      city:[],
      starTime:'',
      endTime: '',
      dialogShow:false,
      orderType:0,
      zg_show:false,
      viewIndex:0,
      list:[{}],
      showIndex:false,
      searchText:'',
      showFilter: false,
      defult_endTime:'',
      refund_dailog_show:false,
      totalPage:0,
      type:0,
      "pageSize": 20,
      "pageNum": 1, 
      cityList:[ JSON.parse(sessionStorage.cityList || '[]')],
    }
  },
  created (){
    this.getAmouthDay();
  }, 
  mounted () {  
    if(this.$route.query.startTime){
      this.type = 1;
    }
    this.getData(this.$route.query);

  },
  methods: {
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
      let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
      this.starTime = util.timeTampt(mounth_ago);
      this.endTime= util.timeTampt(today); 
      this.defult_endTime = util.timeTampt(today); 
    },
    confirmSelect(){
      this.pageNum = 1;
      this.type = 0 ;
      this.getData();
    },
    showDialog(index){
      this.viewIndex = index;
      this.dialogShow = true;
    },
    showZGDialog(index){
      this.viewIndex = index;
      this.zg_show = true;
    },
    //重置筛选
    reset(){
      this.searchText = '';
      this.city=[];
      this.getAmouthDay();
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    showChilderGoods(idx1,idx2){
      let bool = !this.list[idx1].goodsList[idx2].hidden;
      this.$set(this.list[idx1].goodsList[idx2],"hidden",bool);
    },
    changeOrderType(){

      if(this.orderType>=2){
        this.orderType=0;
      }
      // else if(this.orderType == 0){
      //   this.orderType=3;
      // } else if(this.orderType == 2){
      //   this.orderType=0;
      // } 
      else{
         ++this.orderType;
      } 
     
      this.pageNum = 1;
      this.getData();
    },
    getMore(){
      this.getData();
    },
    confirmToRefund(){ // 确认退款
      if(!this.refund_money || this.refund_money < 0 || this.refund_money > this.list[this.viewIndex].actualPayTotal ){
        return this.$vux.toast.show({
                  text: '价格填写错误',
                  type:'text'
                })
      }
      if(!this.refund_remark){
        return this.$vux.toast.show({
                  text: '请填写备注',
                  type:'text'
                })
      }
      this.refund_dailog_show = false;
      this.$vux.confirm.show({
          title: '警告',
          content: `确认给此订单退款？`, 
          onCancel () { 
          },
          onConfirm: ()=> {
            api.moreList.refunds({ 
              orderId: this.list[this.viewIndex].orderId,
              orderType :this.list[this.viewIndex].orderType,
              refundsPrice :this.refund_money,
              refundRemarks:this.refund_remark    
            },res=>{
              return this.$vux.toast.show({
                text: '商品已退款完成',
                type:'text',
                onShow:res=>{
                  this.pageNum = 1;
                  this.getData();
                }
              })
            }) 
          }
        })
    },
    refundOrder(){//
      this.refund_dailog_show = true;
      this.refund_money ="";
      this.refund_remark = "";
      this.zg_show = false;
      
    },
    resultClick(e){
      console.log(e)
    },
    getData(params){
      params = params || {};
      let defult = {
        "pageSize": this.pageSize,
        "pageNum": this.pageNum,
        "storeId":this.$route.query.id
      }
      if(this.searchText){
        params.goodsName = this.searchText;
      }
      if(this.type){ 
          params.startTime = this.$route.query.startTime || this.starTime; 
          params.endTime = this.$route.query.endTime || this.endTime;
      }else{
         if(this.starTime){
          params.startTime = this.starTime;
        }
        if(this.endTime){
          params.endTime = this.endTime;
        }
      }
     
      if(this.city[0]){
        params.city = this.city[0];
      }
      params=Object.assign(defult,params);
      if(this.orderType == 2){ // 烹饪机订单
        return api.moreList.orderList(params,res=>{
          this.showFilter=false;
          this.list = params.pageNum==1? res.result.data : this.list.concat(res.result.data); 
          ++this.pageNum; 
          this.totalPage = res.result.totalPage;
        })
      }
       if(this.orderType == 0 || this.orderType == 1){ // 销售订单
        if(this.orderType === 1){
          params.orderType=this.orderType;
        }
        
        return api.moreList.unionOrder(params,res=>{
          this.showFilter=false;
          this.list = params.pageNum==1? res.result.data : this.list.concat(res.result.data); 
          ++this.pageNum; 
          this.totalPage = res.result.totalPage;
        })
      }
    },
    get_ZGM_List(){

    },
    onSubmit(e){
      console.log(e)
    }
  }
}
</script>
 
<style lang="less" scoped> 
 .money-set{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .12rem 0;
  }
  .flex-box{
    display: flex;
    align-items: center;
  }
.goods-title{
  padding: .20rem .32rem;
  font-weight: bold;
  text-align: left;
}
.change-box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconqiehuan{
  margin-left: .08rem;
}
.flex_lay{
  display: flex;
  align-items: center;
}
.morelist{
  padding-top: 44px;
}
.icontuikuan{
  color: red;
}
.left-text{
    width: 2.0rem;
    word-break: break-all;
    text-align: right;
    padding-right: .12rem;
  }
.dialog-content{
  background: #fff;
  border-radius: 8px;
  min-height: 200px;
  .refund-btn{
    width: 3.2rem;
    margin: .24rem auto;
    background: #FABE00;
    color: #fff;
    height: .66rem;
    line-height: .66rem;
    border-radius: .12rem;
    text-align: center;
  }
}
/deep/.weui-dialog{
  max-width: 100%;
  width: 85%;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.btn-box{
        display: flex;
    &>div{
      flex: 1;
      text-align: center;
      height: 45px;
      line-height: 45px;
    }
    .cancle-btn{
      color: #666;
    }
    .confirm-btn{
      color: green;
    }
  }
  .dia-content{
    padding: .24rem;
    .dia-tips{
      color: #666;
      margin-bottom: .12rem;
      font-size: .22rem;
      text-align: left;
      span{
        color: red;
        font-size: .28rem;
      }
    }
    .input-dia{
      height: .68rem;
      border: 1px solid #ccc; 
      padding: 0 .20rem;
    }
  }
.goods-row-item{
  justify-content: space-between;
  height: .88rem; 
  padding: 0 .20rem;
}
.gray-bg{
  background: #f5f5f5;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.btn-box{
  display: flex;
  width: 100%;
  margin-top: 20px;
  height: 44px;
  justify-content: space-between; 
  .btn{
    border-radius: 8px;
    height: 44px;
    width: 45%;
    line-height: 44px;
    text-align: center;
    color: #fff;
    &:active{
      opacity: .7;
    }
    &.reset{
      background: #ddd;
    }
    &.confirm{
      background: #FABE00;
    }
  }
}
.iconshaixuan{
  position: absolute;
  right: .20rem;
  top: .28rem;
}
.filter-top{
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 3;
  .isclick{
    border-width: 0 1px 1px 0;
    margin-top: -6px;
  }
}
.data-list{
    padding-top: 48px;
  .data-header{
    height: 48px;
    line-height: 48px;
    font-weight: bold;
    background: #ddd;
    display: flex;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    .data-header-title{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .data-row{
    height: 48px;
    line-height: 48px;
    display: flex;
    &-item{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.view-more{
  color: #999;
  display: flex;
  align-items: center;
  height: 44px;
  justify-content: center; 
  .isclick{
    // border-width: 0 1px 1px 0;
    // margin-top: -6px;
  }
}
</style>
